<template>
	<!-- 优惠券底层 -->
	<view class="inviteNew">
		<view class="circle top">

		</view>
		<view class="circle mid">

		</view>
		<view class="poster">
			<image :src="imagesUrl('darkposter.png')" mode="aspectFill" />
			<view class="bottom">
				<view class="lef">
					<view class="pic">
						<image :src="imageUrl('pic.png')" mode=""></image>
					</view>
					<view class="name">
						昵称昵称昵称
					</view>
					<view class="invite">
						邀请你一起抽盲盒
					</view>
				</view>
				<view class="rig">
					<view class="QRcode">
						<view class="code">
							<image :src="imagesUrl('qrcode.png')" mode="aspectFill" />
						</view>
						<view class="join">
							微信扫码加入
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="shareposter">
			<view class="content">
				<view class="ways" v-for="(item,index) in ways" :key="index">
					<view class="icon">
						<image :src="item.src" mode="aspectFill" />
					</view>
					<view class="word">
						{{item.word}}
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				ways: [{
					src: this.imageUrl('wechat.png'),
					word: '微信好友'
				}, {
					src: this.imageUrl('friend.png'),
					word: '朋友圈'
				}, {
					src: this.imageUrl('album.png'),
					word: '保存到相册'
				}, ],
				show: false,

				// 轮播图函数
				swiper: {
					active: 1, //当前活跃的值
					time: 3000, //自动轮播的间隔
				},
				time: 3000,
				index: 0,
			}
		},
		methods: {
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			}
		},
		components: {

		},
		created() {

		}
	}
</script>

<style lang="scss" scoped>
	// 优惠券盒子
	.inviteNew {
		width: 100vw;
		height: 90vh;
		background: #fff;


		position: relative;

		.circle {
			width: 1812rpx;
			height: 1748rpx;
			border-radius: 50%;
			background: radial-gradient(51% 51% at 50% 50%, #FF7803 0%, rgba(255, 120, 3, 0.00) 100%);
			opacity: 0.7;

		}

		.top {
			position: absolute;
			top: -900rpx;
			right: -200rpx;
		}

		.mid {
			position: fixed;
			top: 900rpx;
			right: -300rpx;
		}

		.poster {

			border-radius: 16rpx;
			z-index: 10;

			width: 522rpx;
			height: 928rpx;
			position: absolute;
			top: 45%;
			left: 50%;
			transform: translate(-50%, -50%);

			image {
				width: 522rpx;
				height: 928rpx;
			}

			.bottom {
				border-radius: 0px 0px 8px 8px;
				height: 184rpx;
				width: 522rpx;
				background-color: #fff;
				position: absolute;
				bottom: 0;
				display: flex;
				justify-content: space-between;

				.lef {
					margin-left: 34rpx;
					width: 258rpx;
					display: flex;
					flex-direction: column;
					color: #333333;

					position: relative;

					.name {
						margin-top: 58rpx;
						font-size: 24rpx;

					}

					.invite {
						margin-top: 20rpx;
						font-size: 28rpx;
						font-weight: 500;
					}

					.pic {
						position: absolute;
						width: 92rpx;
						height: 92rpx;
						top: -46rpx;

						image {
							width: 92rpx;
							height: 92rpx;
						}
					}
				}

				.rig {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;

					.QRcode {
						margin-top: 20rpx;
						margin-right: 20rpx;

						.code {
							margin: 0 auto;
							width: 108rpx;
							height: 108rpx;

							image {
								width: 108rpx;
								height: 108rpx;
							}
						}

						.join {

							margin-top: 4rpx;

							font-size: 20rpx;
							color: #999999;
						}
					}
				}
			}
		}

		.shareposter {
			z-index: 20;
			position: fixed;
			bottom: 0;
			height: 200rpx;
			width: 100%;
			background-color: #fff;
			border-radius: 24rpx 24rpx 0px 0px;

			.title {
				position: absolute;
				top: 42rpx;
				left: 42rpx;
				font-size: 28rpx;
			}

			.content {
				margin: 0 auto;
				margin-top: 36rpx;



				width: 70%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.ways {
					font-size: 20rpx;
					font-weight: 500;
					line-height: 44rpx;
					letter-spacing: 0.64rpx;
					width: 150rpx;
					height: 130rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;


					.icon {
						width: 72rpx;
						height: 72rpx;

						image {
							width: 72rpx;
							height: 72rpx;
						}
					}
				}
			}

		}
	}
</style>